<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核心组件：vue-Router-路由练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <style>

    </style>
</head>
<body>
<div id="app">

    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home">home</router-link>
        <router-link to="/about">about</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view>
        <todo-list >
            <template v-slot:todo="{ todo }">
                {{ todo.text }}
            </template>
        </todo-list>
    </router-view>
</div>
<template id="child">
    <h3>Welcome to my home</h3>
</template>
<template id="child1">
    <h3>This is the tutorial about vue-router</h3>
</template>
<script>
    Vue.component("todo-list",{
        data:function () {
            return {
                list:[
                    {id:0,text:"Welcome to my home"},
                    {id:1,text:"This is the tutorial about vue-router"},
                ]
            }
        },
        template:"#child",
    });
    // 定义组件
    const Home ={template: "#child"};
    const About ={template: "#child1"};
    //把组件放到路由里
    const routes=[
        {path:"/home",component:Home},
        {path:"/about",component:About}
    ];
   //定义路由对象，把上面的内容-路径传入路由对象
    const router=new VueRouter({
        routes
    });
    //启动vue

    const app= new Vue({
        router
    }).$mount("#app")
</script>
</body>
</html>
